<template>
  <view class="detail-page">
    <!-- 商品与店铺信息 -->
    <view class="card goods-card">
      <image class="goods-image" :src="orderInfo.pic" mode="aspectFill"></image>
      <view class="goods-info">
        <view class="goods-name">{{ orderInfo.prodName || '-' }}</view>
        <view class="goods-sub">{{ orderInfo.remark || '' }}</view>
        <view class="goods-meta">
          <text class="price">￥{{ formatPrice(orderInfo.price) }}</text>
          <text class="units" v-if="orderInfo.units">/{{ orderInfo.units }}</text>
          <text class="num">x{{ orderInfo.num || 1 }}</text>
        </view>
      </view>
      <view class="shop-info">
        <image class="shop-avatar" :src="orderInfo.shopHead" mode="aspectFill"></image>
        <view class="shop-name">{{ orderInfo.shopUser || '-' }}</view>
      </view>
    </view>

    <!-- 评价表单 -->
    <view class="card form-card">
      <u--form ref="formRef" :model="formData" labelWidth="160">
        <u-form-item label="商品评分" prop="score" required>
          <u-rate v-model="formData.score" count="5" size="36" activeColor="#ff9f1a"
                  inactiveColor="#eee"></u-rate>
        </u-form-item>
        <u-form-item label="评价内容" prop="content" required>
          <u-input v-model="formData.content" type="textarea" placeholder="说说你的使用感受~"
                   border="none"
                   count maxlength="300" autoHeight></u-input>
        </u-form-item>
        <u-form-item label="匿名评价" prop="isAnonymous">
          <u-switch size="30" :activeValue="1" :inactiveValue="0" v-model="formData.isAnonymous"
                    activeColor="#276AEE"></u-switch>
        </u-form-item>
      </u--form>
    </view>

    <!-- 底部提交 -->
    <view class="bottom-bar">
      <u-button type="primary" class="submit-btn" @click="onSubmit">提交评价</u-button>
    </view>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      orderInfo: {},//订单信息
      formData: {
        score: 5,
        content: '',
        isAnonymous: 0,
      },
      rules: {
        score: [{required: true, message: '请给商品评分'}],
        content: [{required: true, message: '请输入评价内容'}],
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  onLoad(opt) {
    if (opt && opt.id) {
      this.orderId = opt.id
      this._getOrderDetail(opt.id)
    }
  },
  methods: {
    // 根据id查询订单详情
    _getOrderDetail(id) {
      let params = {id}
      this.$api.getOrderDetail(params).then(res => {
        if (res.success) {
          this.orderInfo = res.result || {}
          console.log('订单详情', res)
        }
      })
    },
    formatPrice(v) {
      const n = Number(v || 0)
      return n.toFixed(2)
    },
    onSubmit() {
      // 设置校验规则并校验
      this.$refs.formRef.setRules(this.rules)
      this.$refs.formRef.validate().then(() => {
        if (!this.orderInfo || !this.orderInfo.id) {
          return uni.showToast({title: '订单信息异常', icon: 'none'})
        }
        const payload = {
          score: Number(this.formData.score || 0),
          content: (this.formData.content || '').trim(),
          userId: this.userInfo.id,
          shopId: this.orderInfo.prodId, // 商品id
          cardId: this.orderInfo.shopCardId,
          isAnonymous: this.formData.isAnonymous,
          orderId: this.orderInfo.id,//订单id
          prodName:this.orderInfo.prodName,//商品名称
          pic:this.orderInfo.pic,//商品封面
        }
        this.$api.addMssdProdComm(payload).then(res => {
          if (res && res.success) {
            uni.showToast({title: '评价成功', icon: 'success'})
            setTimeout(() => {
              uni.navigateBack()
            }, 600)
          } else {
            uni.showToast({title: (res && res.message) || '评价失败', icon: 'none'})
          }
        }).catch(() => {
          uni.showToast({title: '评价失败', icon: 'none'})
        })
      }).catch(() => {
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.detail-page {
  background: #f5f7fa;
  min-height: 81vh;
  padding-bottom: 140rpx;
  padding-top: 25rpx;
}

.card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.goods-card {
  display: flex;
  align-items: center;
}

.goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background: #f2f3f5;
}

.goods-info {
  flex: 1;
  margin-left: 20rpx;
}

.goods-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1f2d3d;
}

.goods-sub {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #8a9099;
}

.goods-meta {
  margin-top: 10rpx;
  color: #ff4d4f;
  display: flex;
  align-items: baseline;
}

.goods-meta .price {
  font-size: 32rpx;
  font-weight: 700;
}

.goods-meta .units {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #606266;
}

.goods-meta .num {
  margin-left: 16rpx;
  font-size: 24rpx;
  color: #909399;
}

.shop-info {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shop-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #f2f3f5;
}

.shop-name {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #303133;
}

.form-card {
  padding: 20rpx 30rpx;

  /deep/ .u-rate__icon {
    margin-right: 8rpx;
  }
}

.bottom-bar {
  padding: 65rpx 50rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>
